<script setup lang="ts">
import type { VersionVO } from '~/api/system/version/types.ts'
import { apiListVersion } from '~/api/system/version'

const versionUpdateDate = ref('')
const versionList = ref<VersionVO[]>([])

async function fetchList() {
  const params = {
    pageNum: 1,
    pageSize: -1,
    updateDate: versionUpdateDate.value,
  }
  const { data } = await apiListVersion(params)
  versionList.value = data.records || []
}

onMounted(() => {
  fetchList()
})
</script>

<template>
  <a-date-picker v-model:value="versionUpdateDate" value-format="YYYY-MM-DD" @change="fetchList" />
  <div v-if="versionList.length > 0" class="flex flex-col gap-10px">
    <div v-for="item in versionList" :key="item.id" class="version-item">
      <div class="flex items-center">
        <bh-icon name="icon-tpxiaologo" style="font-size: 20px;" />
        <span class="info-update-time">{{ item.updateDate }}更新</span>
      </div>
      <div class="item-content" v-html="item.content" />
    </div>
  </div>
  <div v-else class="flex-center mt-100px">
    <div class="flex flex-col items-center">
      <bh-empty img-width="60px" img-heidht="60px" />
    </div>
  </div>
</template>

<style scoped lang="less">
.version-item {
  padding: 20px;
  line-height: normal !important;
  background-color: var(--bh-color-fc);
  border-radius: var(--bh-border-radius-main);

  .info-update-time {
    margin-left: 10px;
    color: var(--bh-color-3);
  }

  .item-content {
    margin-top: 15px;
    color: var(--bh-color-3);
    white-space: pre-wrap;
    word-wrap: break-word;
  }
}
</style>
